<template>
<div class="juheh5-pay">
    <div class="account-header">
        <div class="back-icon"  @click="handleBackClick">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
            </svg>
        </div>
        扫码支付
    </div>
    <div class="account-content">
        <div class="pay-content">
            <div class="order-info">
                <div class="order-amount">￥<label class="amount">{{ amount }}</label></div>
            </div>
            <div class="pay-type-box">
                <div class="qrcode-img">
                    <div id="qr-code-container"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { AwesomeQR } from "awesome-qr";

export default {
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
        orderParams: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            myValue: this.modelValue,
            checkTradeNo: '',
            checkTradeNoCount: 0,
        };
    },
    watch: {
        modelValue: {
            deep: true,
            handler(newVal) {
                this.myValue = newVal;
            },
        },
        myValue: {
            deep: true,
            handler(newVal) {
                this.handleSyncData();
            },
        }
    },
    computed: {
        goodsName() {
            return this.orderParams.params.goods_name
        },
        tradeNo() {
            return this.orderParams.trade_no
        },
        amount() {
            return parseFloat(this.orderParams.params.money).toFixed(2)
        },
    },
    mounted() {
        this.createQrcode()
    },
    methods: {
        handleSyncData() {
            this.$emit("update:modelValue", this.myValue);
        },
        handleBackClick() {
            this.myValue.currentComponent = 'Pay';
            this.myValue.currentComponentTab = '';
        },
        close() {
            this.myValue.currentComponent = '';
            this.myValue.currentComponentTab = '';
        },
        createQrcode() {
            const _this = this
            const qrcode_div = document.getElementById('qr-code-container');

            // 定义生成二维码的参数
            const options = {
                text: _this.myValue.payJumpQrcodeUrl, // 二维码内容
                size: 250, // 二维码尺寸
                margin: 10, // 二维码边距
                colorDark: '#000000', // 黑色块的颜色
                colorLight: '#ffffff', // 白色块的颜色
                correctLevel: AwesomeQR.CorrectLevel.M, // 纠错级别
            };

            // 创建一个 AwesomeQR 实例
            const qrcode = new AwesomeQR(options);
            qrcode.draw().then(() => {
                qrcode_div.appendChild(qrcode.canvas);

                // 监听订单状态
                _this.checkOrderStatusBegin(_this.tradeNo)
            }).catch((error) => {
                layer.msg('创建二维码失败')
            });
        },
        checkOrderStatusBegin(trade_no) {
            const _this = this

            if (_this.checkTradeNo == trade_no) {
                _this.checkTradeNoCount = 0
                return
            }
            _this.checkTradeNo = trade_no
            _this.checkTradeNoCount = 0

            setTimeout(() => {
                _this.checkOrderStatus(trade_no)
            }, 3000);
        },
        checkOrderStatus(trade_no) {
            const _this = this

            // 如果当前订单与检测订单不一致
            if (_this.tradeNo != trade_no) {
                return
            }

            // 如果当前不处于此页面中
            if (this.myValue.currentComponent != 'PayQrcode') {
                return
            }

            var params = {
                trade_no: trade_no,
            }
            var url = 'https://sdk-log.tkungame.com/api/sdk/order/info'
            http.post(url, params, function(code, msg, data) {
                if (code !== 0) {
                    return
                }
                // 如果已经支付成功则关闭页面
                if (data.status!=0 && data.status!=11) {
                    return _this.close()
                }

                // 否则等待下一秒查询
                _this.checkTradeNoCount++
                if (_this.checkTradeNoCount < 60) {
                    setTimeout(() => {
                        _this.checkOrderStatus(trade_no)
                    }, 2000);
                }
            }, false);
        }
    },
};
</script>

<style lang="scss" scoped>
.account-content {
    width: 100% !important;
    margin: 0 !important;
}

.qrcode-container {
    display: flex;
    z-index: 9999;
    width: 100%;
    aspect-ratio: 595 / 842;
    padding: 0;
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
}

.qrcode-img {
    width: 100%;
    height: auto;
    text-align: center;
}

</style>
